<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-date-picker
          v-model="params['create_time.gte']"
          type="date"
          value-format="yyyy-MM-dd"
          @change="setParams"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.notice_placard_title"
          placeholder="标题名称"
          @keyup.enter.native="getData()"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item class="float-right">
        <el-button type="primary" icon="el-icon-plus" @click="editNotice()">新增通知</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:content="scope">
        <div class="text-truncate" :title="scope.row.content">{{ scope.row.content }}</div>
      </template>
    </c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <c-form-dialog
      label-width="140px"
      title="编辑通知公告"
      ref="form"
      :table-name="tableName"
      :form-items="formItems"
      :form-data="formData"
      :before-save="handleBeforeSave"
      :table-id="tableId"
      @success="getData(params.index)"
      :visible.sync="visible"
    ></c-form-dialog>
  </div>
</template>

<script>
import { dateFormat, msgbox } from '@/common/utils/common'
import WangEditor from '@/components/WangEditor'
const enumNoticeObject = {
  all: '所有',
  bank: '银行',
  credit: '担保联盟',
}
export default {
  data() {
    return {
      params: {
        index: 1,
        size: 15,
        'orWhere.service_id.eq': ['all', 'bank', 'credit'],
      },
      order: { create_time: 'desc' },
      tableCount: 0,
      tableName: 'notice_placard',
      loading: false,
      tableColumns: [
        {
          attrs: { label: '通知对象', prop: 'service_id', align: 'center', width: 150 },
          process: v => enumNoticeObject[v],
        },
        {
          attrs: { label: '时间', prop: 'create_time', align: 'center', width: 120 },
          process: v => dateFormat(v, 'yyyy-MM-dd hh:mm'),
        },
        { attrs: { label: '标题', prop: 'notice_placard_title', align: 'center' } },
        {
          attrs: { label: '操作', align: 'center', width: 120 },
          operations: [
            { content: '修改', icon: 'fa fa-edit', event: this.editNotice },
            {
              content: '删除',
              icon: 'fa fa-trash',
              attrs: { class: 'text-danger' },
              event: this.deleteNotice,
            },
          ],
        },
      ],
      tableData: [],
      formItems: [
        {
          tag: 'select',
          itemAttrs: {
            label: '通知对象',
            rules: [{ required: true, message: '请选择通知对象', trigger: 'change' }],
          },
          attrs: {
            clearable: false,
            key: 'service_id',
            options: enumNoticeObject,
          },
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '标题',
            rules: [{ required: true, message: '请输入通知公告标题', trigger: 'blur' }],
          },
          attrs: { key: 'notice_placard_title', value: '', placeholder: '请输入通知公告标题' },
        },
        {
          tag: WangEditor,
          itemAttrs: {
            label: '内容',
            rules: [{ required: true, message: '请输入通知公告内容', trigger: 'blur' }],
          },
          attrs: {
            type: 'textarea',
            key: 'content',
            value: '',
            autosize: { minRows: 12 },
            placeholder: '请输入通知公告内容',
          },
        },
      ],
      visible: false,
      tableId: '',
      formData: {},
    }
  },
  computed: {},
  created() {
    this.getData()
  },
  methods: {
    async getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData('credit', this.tableName, this.params, this.order)
        .then(res => {
          this.tableData = (res && res.data && res.data.data) || []
          this.tableCount = (res && res.data && res.data.totalCount) || 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    setParams(date) {
      if (date) {
        this.params['create_time.lte'] = date + ' 23:59:59'
      } else {
        this.params['create_time.lte'] = ''
      }
    },
    editNotice(row) {
      this.formData = row ? { ...row } : {}
      this.tableId = row ? row.notice_placard_id : ''
      this.visible = true
    },
    handleBeforeSave(data) {
      return data
    },
    deleteNotice(row) {
      msgbox({
        message: `确定删除：${row.notice_placard_title}?`,
        beforeClose: () =>
          this.$api.deleteData(this.$serviceName, this.tableName, row.notice_placard_id),
      })
        .then(() => {
          this.$message.success('删除成功！')
          this.getData()
        })
        .catch(() => this.$message.error('删除失败，请重试！'))
    },
  },
}
</script>
<style lang="scss" scoped></style>
